<script setup lang="ts">
import APISearch from '~/api/search/index'
import ItemShopkeeper from '~/components/ItemShopkeeper/index.vue'
import PaginationAlbum from '~/components/PaginationAlbum/index.vue'
import DialogMessage from '~/components/DialogMessage/index.vue'
import { useAuth } from '~/stores/auth/index'
import { ElMessage } from 'element-plus'

definePageMeta({
    showSmallSearchBox: true,
})

const $router = useRouter()
const $route = useRoute()
const { info } = storeToRefs(useAuth())
const { isNextOperation } = useAuth()

const queryParams = ref<any>({
    page: 1,
    limit: 8
})

const queryData = ref<any>({
    type: 'shop',
    order: {
        sales: undefined,
        min_price: undefined,
        create_time: undefined
    }
})

const loading = shallowRef<boolean>(false)

watch($route, () => {
    getList()
}, { immediate: true })

const list = ref<any>([])
const total = shallowRef<number>(0)

function getList() {
    queryData.value.keyword = $route.query.q
    const data = { ...queryData.value }
    loading.value = true
    APISearch.searchShop(data, queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

const shopInfo = ref<any>()
const dialogVisible = shallowRef<boolean>(false)

function onShowDialogMessage(shopkeeper?: any) {
    if (isNextOperation()) {
        if (info.value.id == shopkeeper?.user_id) return ElMessage.error('不可以与自己聊天')
        shopInfo.value = shopkeeper
        dialogVisible.value = true
    }
}

</script>

<template>
    <div class="search">
        <div class="search-condition">
            <div class="title">搜索结果：<span>{{ total }}</span> 个店主</div>
        </div>
        <div v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" />
            <ItemShopkeeper v-for="item in list" :key="item.shop_id" :shopkeeper="item"
                @on-show-dialog-message="onShowDialogMessage" />
        </div>
        <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
            @get-list="getList" />
        <DialogMessage v-model="dialogVisible" :shopInfo="shopInfo" />
    </div>
</template>

<style lang="less" scoped>
.search {
    width: 1300px;
    margin: 0 auto;
    padding: 30px 0;

    .content {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 50px;

        &:after {
            content: '';
            display: block;
            flex-grow: 99999;
        }

        .content-item {
            flex-grow: 1;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;

            img {
                display: block;
                min-width: 100%;
                height: 200px;
                object-fit: cover;
            }
        }
    }

    .list {
        border-radius: 5px;
        position: relative;
        z-index: 5;
        grid-template-columns: repeat(4, 1fr);
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .item {
            width: 300px;
            cursor: pointer;
            border-radius: 5px;
            overflow: hidden;

            .frame {
                background-color: red;
                height: 340px;

                .frame-item {
                    height: 170px;
                    background-color: #e8e8e8;
                    background-size: cover;
                    background-position: center;
                    position: relative;

                    .title {
                        position: absolute;
                        left: 20px;
                        bottom: 0;
                        height: 45px;
                        line-height: 45px;
                        font-size: 14px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #ffffff;
                    }

                }
            }
        }
    }

    .search-condition {
        display: flex;
        align-items: center;

        .sort {
            display: flex;
            align-items: center;
            margin-left: auto;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

            &::before {
                content: '排序：';
                color: rgba(187, 187, 187, 1);
                font-size: 14px;
            }

            .sort-conter {
                display: flex;
                gap: 0 20px;

                div {
                    color: rgba(187, 187, 187, 1);
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                }
            }
        }

        .title {
            color: rgba(187, 187, 187, 1);
            font-size: 16px;
            display: flex;
            align-items: center;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

            &::before {
                content: '';
                display: block;
                width: 5px;
                height: 16px;
                border-radius: 3px;
                background-color: rgba(249, 20, 20, 1);
                margin-right: 10px;
            }

            span {
                color: rgba(249, 20, 20, 1);
                font-size: 16px;
            }
        }
    }
}
</style>
